<template>
  <div class="dg-form-item-wrapper">
    <div class="dg-form-item-shade" @mouseover="formItemMouseover" @mouseout="formItemMouseout" @dblclick="formItemDblclick(index)"/>
    <transition name="dg-icon-fade">
      <div v-show="showIcon" class="dg-icon-wrapper">
        <i class="el-icon-setting dg-margin-right" @click="showConfDialog(index)"/>
        <i class="el-icon-minus" @click="removeFormItem(index)"/>
      </div>
    </transition>
    <div class="dg-form-item">
      <!-- p -->
      <p v-if="widget.type == 'p'" :style="{fontWeight:widget.fontWeight, fontSize:widget.fontSize+'px', color:widget.color, textAlign:widget.textAlign}">{{ widget.content }}</p>
      <el-form-item v-if="widget.type !== 'p'" :label="widget.label">
        <!-- input -->
        <el-input
          v-if="widget.type == 'input'"
          :placeholder="widget.placeholder"
          :required="widget.required"
          v-model="widget.value"
          :disabled="true"/>
        <!-- select -->
        <el-select
          v-if="widget.type == 'select'"
          v-model="widget.value"
          :placeholder="widget.placeholder"
          :disabled="true"
          style="width:100%;">
          <el-option
            v-for="(option,index) in widget.options"
            :key="index"
            :label="option.label"
            :value="option.value"/>
        </el-select>
        <!-- radio -->
        <el-radio-group
          v-if="widget.type == 'radio'"
          v-model="widget.value"
          :disabled="true">
          <el-radio
            v-for="(option, index) in widget.options"
            :key="index"
            :label="option.value">
            {{ option.label }}
          </el-radio>
        </el-radio-group>
        <!-- checkbox -->
        <el-checkbox-group
          v-if="widget.type == 'checkbox'"
          v-model="widget.value"
          :disabled="true">
          <el-checkbox
            v-for="(option,index) in widget.options"
            :key="index"
            :label="option.value">
            {{ option.label }}
          </el-checkbox>
        </el-checkbox-group>
        <!-- date -->
        <el-date-picker
          v-if="widget.type == 'date'"
          v-model="widget.value"
          :disabled="true"
          :placeholder="widget.placeholder"
          type="date"/>
      </el-form-item>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ConfBuilder',
  props: {
    conf: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      showIcon: false,
      widget: {}
    }
  },
  watch: {
    conf(val) {
      var widget = JSON.stringify(val)
      this.widget = JSON.parse(widget)
    }
  },
  mounted() {
    var obj = JSON.stringify(this.conf)
    this.widget = JSON.parse(obj)
  },
  methods: {
    removeFormItem(index) {
      this.$emit('remove-form-item', index)
    },
    showConfDialog(index) {
      this.$emit('show-form-item-conf', index)
    },
    formItemDblclick(index) {
      this.$emit('show-form-item-conf', index)
    },
    formItemMouseover() {
      this.showIcon = true
    },
    formItemMouseout() {
      var self = this
      setTimeout(function() {
        self.showIcon = false
      }, 800)
    }
  }
}
</script>
<style scoped>
.dg-form-item-wrapper{
  position:relative;
}
.dg-form-item-shade{
  cursor:move;
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  z-index:5;
}
.dg-icon-wrapper{
  position:absolute;
  right:0;
  top:-17px;
}
.dg-form-item{
  cursor: move;
}
.dg-margin-right{
  margin-right:5px;
}
.dg-icon-fade-enter-active,.dg-icon-fade-leave-active{
  transition: opacity 1s;
}
.dg-icon-fade-enter,.dg-icon-fade-leave-to{
  opacity: 0;
}
</style>
